<template>
  <view id="my">
    <zk-topBg :showBg="false" paddingTop="40" :showBack="true" title="个人信息">
    </zk-topBg>
    <view class="content">
      <view class="user_info flex">
        <image
          @tap="showPopup"
          class="avatar"
          :src="baseURL + '/' + memberStore.profile.StaffImg" />
        <view class="user_msg">
          <view class="name fs_20 color_fff">
            {{ memberStore.profile.StaffName }}
          </view>
          <view class="section fs_14">
            部门号：
            {{ memberStore.profile.StaffDept }}
          </view>
        </view>
      </view>
      <view class="handle_box card">
        <view @tap="goOtherPage('setName')" class="edit_item flex border_b">
          <view class="edit_title fs_16 color_black flex">
            <image src="@/static/img/login_sever/zh.png" class="mini_Icon" />
            <view class="edit_name">修改姓名</view>
          </view>
          <uni-icons type="right" color="#B7B7B7" size="24" />
        </view>
        <view @tap="goOtherPage('setPW')" class="edit_item flex">
          <view class="edit_title fs_16 color_black flex">
            <image
              src="@/static/img/login_sever/change_Password.png"
              class="mini_Icon" />
            <view class="edit_name">修改密码</view>
          </view>
          <uni-icons type="right" color="#B7B7B7" size="24" />
        </view>
      </view>
    </view>
    <uni-popup ref="popup" center>
      <view class="popup_content">
        <view class="avatar_box">
          <image :src="baseURL + '/' + memberStore.profile.StaffImg" />
        </view>
        <view @tap="chooseImage" class="updata_box flex card">
          <view class="fs_18">上传新头像</view>
          <uni-icons type="right" color="#fff" size="22" />
        </view>
        <view @tap="closePopup" class="close_btn">
          <uni-icons type="closeempty" color="#F4F4F4" size="24" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from "@/stores/modules/member";
import { baseURL } from "@/utils/api/http";
import { onShow } from "@dcloudio/uni-app";
const memberStore = useMemberStore();
const token = memberStore.token;
const popup: any = ref(null);
const showPopup = () => {
  popup.value.open();
};
const closePopup = () => {
  popup.value.close();
};
//
const goOtherPage = (page: string) => {
  uni.navigateTo({
    url: `/pages/my/${page}/${page}`,
  });
};
//上传头像
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: async (result: any) => {
      const tempFilePaths = result.tempFilePaths;
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      uni.uploadFile({
        url: baseURL + "/" + "api/fileUpImg",
        fileType: "image",
        filePath: tempFilePaths[0],
        name: "file",
        header: {
          token: token,
        },
        success: (res: any) => {
          uni.hideLoading();
          const data = JSON.parse(res.data);
          //更新头像
          memberStore.profile.StaffImg = data.files[0];
          uni.showToast({
            title: "上传成功",
            icon: "success",
            duration: 1500,
            mask: true,
          });
        },
        fail: (error) => {
          uni.hideLoading();
          uni.showToast({
            title: "上传失败",
            icon: "error",
            duration: 1500,
            mask: true,
          });
        },
      });
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({
        title: "取消选择",
        duration: 1500,
        mask: true,
      });
    },
    complete: () => {},
  });
};
</script>

<style lang="scss" scoped>
#my {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: url("../../static/img/other/p-cen-bg.png");
  background-size: 100% 100%;
  background-position: center;
  z-index: 0;
  .content {
    padding: 30px 24px;
    .user_info {
      .avatar {
        margin-right: 10px;
        width: 72px;
        height: 72px;
        border: 2px solid rgb(255, 255, 255);
        border-radius: 50%;
      }
      .user_msg {
        height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .section {
          color: #e6f2ee;
        }
      }
    }
    .handle_box {
      margin: 50px 0;
      padding: 12px 20px;
      box-shadow: 0px 4px 4px 0px rgba(50, 150, 111, 0.05);
      .edit_item {
        justify-content: space-between;
        padding: 16px 0;
        &.border_b {
          border-bottom: 1px solid #f4f4f4;
        }
      }
    }
  }
  .popup_content {
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999999999999999;
    position: relative;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .avatar_box {
      width: 330px;
      height: 330px;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .updata_box {
      background: rgb(34, 34, 34);
      color: #fff;
      padding: 20px 15px;
      justify-content: space-between;
      width: 80%;
    }
    .close_btn {
      position: absolute;
      top: 20px;
      left: 20px;
    }
  }
}
</style>
